<script type="text/javascript">
function triggerReg(){
  $("#triggerTabFirst").trigger("click");
}


var c=91;//倒计时90秒
var t;
  function timecounter(){
    if (c==0) {
      document.getElementById('sms').value = '获取手机验证码';
      $("#sms").removeClass('disabled');
      return;

    }
    t=setTimeout("timecounter()",1000);

    c--;
    document.getElementById('sms').value=c+'秒之后重新获取';


    return c;
  }
  function sendsms(event){
    //
    // 此处接入短信平台
    var phonereg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    var mobile_number = $("#valid_mobile").val();


    if (!phonereg.test(mobile_number)) {
      alert('请输入正确的手机号！');
      return ;
    }

    $.get('/login/sms', {mobile: mobile_number}, function(result){
      var obj = JSON.parse(result);
      // console.log(result);
      if (obj.sub_code == 'isv.MOBILE_NUMBER_ILLEGAL') {
        $.get('/login/removeSms');
        alert('请输入正确的手机号！');
        return
      }
      if (obj.sub_code == 'isv.BUSINESS_LIMIT_CONTROL') {
        $.get('/login/removeSms');
        alert('您的操作过于频繁，请稍后再试试！');
        return
      }
      if (obj.result.success) {
        alert('您的验证码已经发送至您的手机'+mobile_number+",请注意查收");
        $("#sms").addClass('disabled');
        t = timecounter();
        return
      }
    });



  }


  $(document).ready(function(){
    $('.ui.form').form({
    on: 'submit',
    fields: {
      mobile: {
        identifier: 'mobile',
        rules: [
          {
            type   : 'empty',
            prompt : '手机号码没了吗？'
          }
        ]
      },
      smstext: {
        identifier: 'smstext',
        rules: [
          {
            type   : 'exactLength[4]',
            prompt : '请输入至少4位验证码'
          }
        ]
      },
      gender: {
        identifier: 'gender',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please select a gender'
          }
        ]
      },
      username: {
        identifier: 'username',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please enter a username'
          }
        ]
      },
      password: {
        identifier: 'password',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please enter a password'
          },
          {
            type   : 'minLength[5]',
            prompt : 'Your password must be at least {ruleValue} characters'
          }
        ]
      },
      terms: {
        identifier: 'terms',
        rules: [
          {
            type   : 'checked',
            prompt : '你怎么能不同意条款！'
          }
        ]
      }
    }
  })
;
  });



</script>
<div><style>
.klogin .column {
      max-width: 450px;
    }
</style>
<br/><br/><br/>

<div class="ui segment">
  <div class="klogin ui container" >
  	<div class="ui middle aligned center aligned grid">
  	  <div class="column">
  	    <h2 class="ui image header">
  	      <img src="/admin/images/logo.png" class="tiny image">
  	      <div class="content">
  	        登录/注册到云螭行
  	      </div>
  	    </h2>
        <%= flash_tag(:error, :class => 'ui error message transition flash-notice', :id => 'flash-notice') %>
        <script type="text/javascript">
          $('.flash-notice').fadeOut(4500);
        </script>
        <div class="ui top attached tabular menu">
          <a id="triggerTabFirst" class="<%=@tab ? '' : 'active'%> item" data-tab="first">手机号快速登录(注册)</a>
          <a id="triggerTabSecond" class="<%=@tab ? 'active' : '' %> item" data-tab="second">用户名密码登录</a>
        </div>
        <div class="ui bottom attached <%=@tab ? '' : 'active'%> tab segment" data-tab="first">

          <% form_tag url(:login, :index), :class=>"ui large form" do %>
  	      <div class="ui stacked ">

            <div class="field">
              <div class="ui left icon input">
  	            <i class="phone icon"></i>
                <input type="text" id="valid_mobile" name="mobile" value="" placeholder='请输入您的手机号'><br/>
  	          </div>
        		</div>
            <div class="field">
              <input id="sms" onclick="sendsms(event)" type="button" value="获取手机验证码" class="ui teal button" />
            </div>
  	        <div class="field">
  	          <div class="ui left icon input">
  	            <i class="note icon"></i>
  	            <input type="text" name="smstext" value="" placeholder='请输入您的手机验证码'>
  	          </div>
  	        </div>
            <div class="inline field">
              <div class="ui checkbox">
                <input type="checkbox" name="terms" checked="checked">
                <label>
                  我同意
                  <a href="/statement/privacy">条款</a>
                </label>
              </div>
            </div>

            <div class="field">
              <input type="submit" value="登录" class="ui fluid large basic red submit button">
            </div>

  	      </div>

  	      <div class="ui error message">

          </div>


  	    <% end %>
        </div>
        <div class="ui bottom attached  tab segment" data-tab="second">

          <% form_tag url(:login, :by_user_name), :class=>"ui large form" do %>
  	      <div class="ui stacked ">

            <div class="field">
              <div class="ui left icon input">
  	            <i class="user icon"></i>
                <input type="text" id="valid_mobile" name="username" value="" placeholder='请输入您的用户名'><br/>
  	          </div>
        		</div>

  	        <div class="field">
  	          <div class="ui left icon input">
  	            <i class="key icon"></i>
  	            <input type="password" name="password" value="" placeholder='请输入您的密码'>
  	          </div>
  	        </div>
            <div class="inline field">
              <p>没有账号？立刻<a href="#" onclick="triggerReg()">注册</a></p>
            </div>
            <div class="inline field">
              <div class="ui checkbox">
                <input type="checkbox" name="terms" checked="checked">
                <label>
                  我同意
                  <a href="/statement/privacy">条款</a>
                </label>
              </div>
            </div>
            <div class="field">
              <input type="submit" value="登录" class="ui fluid large basic red submit button">
            </div>

  	      </div>

  	      <div class="ui error message">

          </div>


  	    <% end %>
        </div>

        <script type="text/javascript">
        $('.menu .item')
        .tab()
        ;
        <% if @tab %>
        $(document).ready(function(){
              $("#triggerTabSecond").trigger('click');
        });

        <% end %>


        </script>


  	  </div>
  	</div>
  </div>

</div>
<br/><br/><br/>
</div>
